<template>
	<gui-page :isLoading="pageLoading">
		<!-- 页面主体 -->
		<view slot="gBody" class="">
			<view class="z-detail-title gui-padding">{{ info.title }}</view>
			<view class="t-con-top"></view>
			<view class="z-com gui-padding t-con-text"><rich-text :nodes="info.text"></rich-text></view>
			<view class="bg-z gui-bg-gray" v-if="info.goods">
				<view class="gui-margin gui-bg-white gui-margin-top z-ding z-mass" @tap="goods(info.goods.id)">
					<view class=""><image :src="imgServer + info.goods.goods_img" mode="widthFix" style="width: 100%;"></image></view>
					<view class="guang">广告 >></view>
					<view class="gui-padding z-mass-title gui-ellipsis">{{ info.goods.goods_name }}</view>
				</view>
			</view>
			<view class="di gui-flex gui-space-between">
				<view class="re-top">
					<text class="gui-icons gui-grids-icon tub">
						&#xe634;
						<text class="re">热度100℃</text>
					</text>
				</view>
				<view class="gui-flex  gui-space-between gui-padding gui-align-items-center">
					<button open-type="share" class="gui-flex gui-align-items-center lizhili_button lizhili_w">
						<text class="gui-grids-icon gui-icons tub">&#xe606;</text>
					</button>

					<!-- <view class="gui-flex gui-align-items-center gui-justify-content-center lizhili_w" @tap='zhuan'>
						<text class=" gui-icons tub">&#xe606;</text>
					</view> -->
					<view class="gui-flex gui-align-items-center gui-justify-content-center lizhili_w" @tap="huitap">
						<text class=" gui-icons tub">&#xe6b8;</text>
						<view v-if="info.ping" class="z-tb-title">{{ info.ping.length }}</view>
					</view>
					<view class="gui-flex gui-align-items-center gui-justify-content-center lizhili_w" @tap="zan_wen">
						<text class=" gui-icons tub">&#xe6ea;</text>
						<view class="z-tb-title">{{ info.zan }}</view>
					</view>
				</view>
			</view>

			<view class="ucenter-line" v-if="hui"></view>
			<view class="shu gui-flex" v-if="hui">
				<textarea v-model="desc" :focus="true" value="" placeholder="说点什么..." class="gui-textarea gui-bg-gray gui-border-box" style="width:600rpx;"></textarea>
				<view class="t-huifu" @tap="tj">回复</view>
			</view>
			<view class="gui-padding" v-if="commentContents.length>0">
				<view class="gui-margin-top gui-margin-bottom">最佳回复</view>
				<view class="gui-comments">
					<view class="gui-comments-items gui-flex gui-rows gui-nowrap gui-space-between" v-for="(item, index) in commentContents" :key="index">
						<image :src="item.img" class="gui-comments-face"></image>
						<view class="gui-comments-body">
							<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
								<text class="gui-comments-header-text gui-text gui-primary-color">{{ item.name }}</text>
								<!-- <text class="gui-comments-header-text gui-icons gui-color-gray gui-text-small">
									&#xe6ea; {{ item.zan }}
								</text> -->
							</view>
							<text class="gui-comments-content gui-block-text">{{ item.desc }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="ucenter-line"></view>
		</view>
	</gui-page>
</template>
<script>
export default {
	data() {
		return {
			imgServer: '',
			id: 0,
			hui: false,
			desc: '',
			info: {},
			pageLoading: true,
			commentContents: []
		};
	},
	onLoad: function(e) {
		this.imgServer = uni.common.imgServer;
		this.id = e.id;
		this.get_data();
		if (e.yaoqing) {
			uni.setStorageSync('yaoqing', e.yaoqing);
		}
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		const user_no = uni.getStorageSync('user_no');
		return {
			title: '商城欢迎您！',
			path: '/pages/arc/show?id=' + this.id+'&yaoqing='+user_no
		};
	},
	methods: {
		huitap() {
			this.hui = !this.hui;
		},
		goods(id) {
			uni.navigateTo({
				url: '/pages/index/shop_detail?id=' + id
			});
		},
		zhuan() {},
		tj() {
			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'get_arc_hui_tj',
					id: this.id,
					desc: this.desc
				},
				false,
				res => {
					if (res.code == 1) {
						uni.common.msg('提交成功');
						setTimeout(() => {
							this.get_data();
							this.hui = false;
						}, 1000);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		},
		get_data() {
			uni.common.post(
				uni.common.apiServer + 'index',
				{
					type: 'get_arc_show',
					id: this.id
				},
				false,
				res => {
					console.log(res);
					this.pageLoading = false;
					if (res.code == 1) {
						let shu = res.data.text;
						shu = shu.replace(/src="\/ueditor\//g, 'style="width: 100%;height:auto !important;" src="' + uni.common.nServer + 'ueditor/');
						shu = shu.replace(/<img/g, '<img style="width: 100%;height:auto !important;" ');
						res.data.text = shu;
						for (let a in res.data.ping) {
							if (res.data.ping[a].img) {
								res.data.ping[a].img = uni.common.imgServer + res.data.ping[a].img;
							} else {
								res.data.ping[a].img = '../../static/logo.png';
							}
						}
						this.info = res.data;
						this.commentContents = res.data.ping;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		},
		zan_wen() {
			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'get_arc_zan',
					id: this.id
				},
				false,
				res => {
					if (res.code == 1) {
						this.info.zan++;
						uni.showToast({
							icon: 'none',
							title: '点赞成功'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		}
	}
};
</script>
<style>
.t-huifu {
	width: 100rpx;
	height: 70rpx;
	margin-left: 10rpx;
	line-height: 70rpx;
	font-size: 28rpx;
	text-align: center;
	background-color: #f04345;
	border-radius: 10rpx;
	color: #fefcff;
}
.gui-textarea {
	height: 70rpx;
}

.shu {
	padding-left: 30rpx;
	padding-right: 20rpx;
}

.search-warp {
	width: 750rpx;
	padding: 15rpx 50rpx;
}

.ping-lun {
	width: 100%;
}

.re-top {
	padding-left: 20rpx;
	margin-top: -15rpx;
	color: #ff8317;
}

.re {
	font-size: 28rpx;
}

.di {
	height: 40rpx;
	line-height: 40rpx;
}

.z-left {
	width: 260rpx;
}

.tub {
	font-size: 38rpx;
}

.t-con-text {
	font-size: 30rpx;
	line-height: 52rpx;
}

.guan {
	width: 120rpx;
	height: 55rpx;
	text-align: center;
	line-height: 55rpx;
	background-color: #f04345;
	color: #fefcff;
	border-radius: 10rpx;
	font-size: 30rpx;
	margin-left: 15rpx;
}

.y-jing {
	font-size: 28rpx;
}

.t-yuan {
	margin-top: 2rpx;
	margin-left: 10rpx;
	width: 55rpx;
	height: 35rpx;
	line-height: 35rpx;
	text-align: center;
	border-radius: 10rpx;
	font-size: 18rpx;
	color: #979797;
	background-color: #f1f1f1;
}

.z-detail-title {
	font-size: 40rpx;
	line-height: 65rpx;
}

.z-com {
	padding-top: 15rpx;
	padding-bottom: 15rpx;
}

.z-com-img {
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 30rpx;
}

.z-com-name {
	width: 400rpx;
	line-height: 35rpx;
	margin-right: 30rpx;
}

.t-con-top {
	margin: 30rpx 15px;
	border-bottom: 1px solid #f2f2f2;
}
.z-commu-img {
	width: 100%;
	overflow: hidden;
}
.z-tb {
	margin-top: 15rpx;
}
.z-tb-title {
	margin-left: 10rpx;
	font-size: 28rpx;
	line-height: 45rpx;
}

.ucenter-line {
	height: 20rpx;
	background-color: #f6f7f8;
	margin: 30rpx 0;
}

.z-textarea {
	height: 60rpx !important;
	line-height: 60rpx;
	background-color: #b9b8bf;
	border-radius: 30rpx;
	border: 1rpx solid #b9b8bf;
}

.z-mass {
	border-radius: 15rpx;
	padding-bottom: 15rpx;
}
.z-mass-time {
	width: 95rpx;
	line-height: 75rpx;
	margin-left: 55rpx;
	font-size: 28rpx;
	color: #b6b6b6;
	text-align: center;
}

.z-mass-title {
	line-height: 65rpx;
	height: 65rpx;
	font-size: 32rpx;
	color: #4e4e4e;
}

.z-mass-title2 {
	width: 500rpx;
	line-height: 38rpx;
	margin-right: 32rpxc;
}

.z-mass-logo2 {
	width: 160rpx;
	height: 160rpx;
	border-radius: 15rpx;
	overflow: hidden;
}

.bg-z {
	margin: 20rpx 0;
	padding: 20rpx 0;
	position: relative;
}
.guang {
	position: absolute;
	top: 30rpx;
	width: 100rpx;
	height: 44rpx;
	line-height: 44rpx;
	font-size: 22rpx;
	background-color: #bdb6b0;
	text-align: center;
	border-radius: 10rpx;
	color: #faf6ed;
}
.lizhili_w{
  width: 100rpx;
  color: #333333;
}
.lizhili_button{
  background: none !important;
  color: #000 !important;
  height: 50rpx;
}
.lizhili_button::after{
  border: none;
}
</style>
